<template>
	<view class="cinema-body" :class="isCover?'lockScroll':''">
	    <image src="https://images.sijiyoufu.com/siji/movie/20241226/bLzHMWRmkQvmCHSL.png" style="width:100%;" mode="widthFix"/>
		<uv-loading-page :loading="isLoadding" bgColor="#16313a" loadingColor="#fff" color="#fff" loadingText="获取购票影院中..." loading-mode="circle"></uv-loading-page>
        <template v-if="!isLoadding">
            <view class="cinema-options-title" :class="isChange?'active':''">
               <!-- <view class="drowItem" @click="openMode('city')"><text>{{ localCity && localCity.name?localCity.name:'城市' }}</text> <uv-icon size="16" name="arrow-down"></uv-icon></view>
                <view class="drowItem" @click="openMode('county')"><text>{{localCounty && localCounty.name?localCounty.name:'区域'}}</text> <uv-icon size="16" name="arrow-down"></uv-icon></view> -->
               <!--  -->
            </view>
             
        </template>
		<uv-popup ref="popupRef" round="12" mode="bottom"
            custom-style="height: 72vh;"
            bgColor="#f5f5f5"
            @change="toggleMask"
            :closeable="true"
            closeIconPos="top-right">
            <City v-if="isCover && modeType == 'city'" @change="changeCity"/>
			<County v-if="isCover && modeType == 'county'" @change="changeCounty" :citycode="localCity.citycode?localCity.citycode:''"/>
            <Tags  v-if="isCover && modeType == 'tag'" @change="changeTag" :tags="teamTags" :localtag="localtag"/>
		</uv-popup>
		 
    </view>
</template>

<script setup lang="ts">
const app = getApp()
import { ref , getCurrentInstance} from 'vue'
import Tabbar from '@/components/tabbar'
import City from '@/components/city/index.vue'
import County from '@/components/city/countys.vue'
import { uniConfig } from '@/config/index'
import Tags from '@/components/tags/index.vue'
import { onLoad , onPageScroll,onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app"
import { wzCinemaList , getTeamList } from "@/api/baseData"
 
const bgAcitve = ref<any>({})
const cinemaList = ref<any>([])
const localCounty = ref<any>({})
const localtag = ref<any>({})
const localCity = ref<any>({})
const isLoadding = ref<any>(true)
const teamTags = ref<any>([])
const gameTeamId = ref<any>('')
onLoad(async (options : any) => {
	const { proxy } = getCurrentInstance();
	await proxy.$onLaunched;
	localCounty.value = await uni.getStorageSync('county')
	localCity.value = await uni.getStorageSync('city')
    gameTeamId.value = options.gameTeamId
	
    getTeamList({}).then(res => {
        res.data.forEach(item => {
            if(gameTeamId.value && item.id ==  gameTeamId.value)localtag.value = item
        })
        teamTags.value = res.data
        getCinema(false)
    })
	openMode('tag')
})
const getCinema = (flag : boolean) => {
    if(flag)uni.showLoading()
	wzCinemaList({
        pageSize:1000,
        pageNo:1,
		citycode:localCity.value.citycode?localCity.value.citycode:'',
		countycode:localCounty.value.citycode?localCounty.value.id:'',
        gameTeamId:localtag.value.id?localtag.value.id:''
	}).then(res => {
        uni.hideLoading()
		isLoadding.value = false
        cinemaList.value = res.data.records
	})
}
const change = (cinema : any) => {
	uni.navigateTo({
		url:`/pages/movie/cinemaPlay?cinemaid=${cinema.id}&gameTeamId=${gameTeamId.value}`
	})
}
const popupRef = ref()
const isCover = ref<any>(false)
const modeType = ref<any>('')
const toggleMask = (e : any) => {
	isCover.value = e.show
}
const openMode = (res : any) => {
	if(res == 'county' && !localCity.value.citycode){
		uni.showToast({icon:'none','title':'请先选择一个城市'})
		return
	}
	modeType.value = res
	popupRef.value.open()
}
const isChange = ref<any>(false)
const changeCity = (res : any) => {
	localCity.value = res
	localCounty.value = {}
	getCinema(true)
	popupRef.value.close()
}
const changeCounty = (res : any) => {
	localCounty.value = res
	getCinema(true)
	popupRef.value.close()
}
const changeTag = (res : any) => {
    localtag.value = res
    gameTeamId.value = res.id
    getCinema(true)
    popupRef.value.close()
}
onPageScroll((e) => {
	if(e.scrollTop>30){
		isChange.value = true
	}else{
		isChange.value = false
	}
})
onShareAppMessage(() => {
		return {
            imageUrl:'https://images.sijiyoufu.com/siji/movie/20250511/4510998067833.png',
			title:'邀你一起体验影院观赛',
			path:'/pages/index/index'
		}
})
	
onShareTimeline(() => {
  return {
    imageUrl:'https://images.sijiyoufu.com/siji/movie/20250511/4510998067833.png',
    title:'邀你一起体验影院观赛',
    path:'/pages/index/index'
  }
});
</script>
<style lang="scss">
.lockScroll{
  overflow: hidden;
	position: fixed;
}
.cinema-body{
    width: 100%;
    height: 100%;
    flex: 1;
	padding-top: 10vh;
    box-sizing: border-box;
    .cinema-options-title{
        padding: 32rpx;
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		box-sizing: border-box;
		height: 11vh;
		display: flex;
		align-items: flex-end;
		&.active{
			background: #fff;
            .drowItem{
                text{color:#000}
            }
		}
		.drowItem{
			display: flex;
			align-items: center;
			margin-right:16rpx;
            min-width: 22%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
			text{
				margin-right:22rpx;
                color:#fff;
			}
		}
    }
    .cinema-options{
        padding: 32rpx;
        width: 100%;
        box-sizing: border-box;
        height: 92%;
        overflow: hidden;
        overflow-y: scroll;
        .cinema-option{
            display: flex;
            justify-content: space-between;
            align-items: center;
            background:#fff;
            border-radius: 9px;
            margin-bottom:32upx;
            padding:32upx;
            .cinema-option-desc{
                display: flex;
                flex-direction: column;
                width:72%;
                font-size: 24upx;
                text{
                    font-size: 32upx;
                    font-weight: 600;
                    padding-bottom: 6upx;
                }
            }
            .cinema-option-icon{
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size:26upx;
                image{
                    width:76upx;
                    height:76upx;
                    margin-right: 24upx;
                }
            }
        }
    }
}
</style>